<!--  -->
<template>
  <view class='configFontsize'>
    <u-toast ref="uToast"></u-toast>
	  <view class="setContent">
      <view class="addTitle">地址信息</view>
      <u--form
        labelPosition="left"
        :model="addMessage"
        :rules="addRules"
        labelWidth="150rpx"
        ref="uForm"
        >
        <u-form-item
          label="姓名"
          prop="userInfo.name"
          borderBottom
          ref="item1"
          >
          <u--input
            border="none"
            placeholder="请输入姓名"
            v-model="addMessage.userInfo.name"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="手机号"
          prop="userInfo.phone"
          borderBottom
          ref="item1"
          >
          <u--input
            placeholder="请输入手机号"
            border="none"
            v-model="addMessage.userInfo.phone"
      			@blur="bealveInput"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="所在地区"
          prop="userInfo.address"
          borderBottom
          ref="item1"
          >
          <u--input
						v-model="addMessage.userInfo.address"
						disabled
						disabledColor="#ffffff"
						placeholder="省、市、区、街道"
						border="none"
				  ></u--input>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
      </u--form>
    </view>
  </view>
</template>

<script>
import {regionData} from 'element-china-area-data'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  //这里存放数据
    return {
      addMessage: {
        userInfo: {
			name: '',
			phone: '',
      address: '',
		},
      },
      addRules: {
        'userInfo.phone' : {
          required: true, 
          message: '请输入手机号',
          trigger: ['blur'],
        },
        'userInfo.name': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur']
        },
        'userInfo.address': {
          type: 'string',
          required: true,
          message: '请选择',
          trigger: ['blur', 'change']
        }
      }
    };
  },
  onReady() {
    console.log(regionData);
    
		//onReady 为uni-app支持的生命周期之一
    this.$refs.uForm.setRules(this.addRules)
  },
  methods: {
    bealveInput(val) {
      const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!regTel.test(val)) {
        this.$refs.uToast.show({ message: '电话号码有误请重新输入', type: 'error', duration: 2000 })
      } else {
        return ''
      }
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
}
</script>
<style lang='scss' scoped>
  /* @import url(); 引入公共css类 */
  @import "@/common/configStyle.scss";
  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #fff;
  }
  .setContent {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: $ruyi-config-outSidePadding;
    .addTitle {
      width: 100%;
      font-size: $ruyi-config-fontBigsize;
      font-weight: $ruyi-config-fontWight;
    }
  }
</style>
